<template>
  <div>
    <div class="innerf-pages section" style="margin-top:-100px">
      <div class="container">
        <div class="privacy about">
          <h4 class="rad-txt">
            <span class="abtxt1">我的</span>
            <span class="abtext">购物车</span>
          </h4>
          <div class="checkout-right">
            <table id="table" class="timetable_sub table-responsive">
              <thead>
                <tr>
                  <th>
                    选择
                  </th>
                  <th>封 面</th>
                  <th>数 量</th>
                  <th>图 书 名</th>
                  <th>单 价</th>
                  <th>操 作</th>
                </tr>
              </thead>
              <tbody>
                <tr class="rem1" v-for="(item, i) in page.list" :key="i">
                  <td>
                    <input
                      class="selBtn"
                      ref="allCheck"
                      @change="changeSelAllBtn($event)"
                      id="section"
                      type="checkbox"
                      :checked="item.checked"
                      :value="item.bookId"
                      :data-id="item.bookId"
                    />
                  </td>
                  <td class="invert-image">
                    <a>
                      <img
                        :src="item.bookImage"
                        alt=" "
                        class="img-responsive"
                        style="width:100px;"
                        @click="showSingleInfo(item)"
                      />
                    </a>
                  </td>
                  <td class="invert">
                    <div class="quantity">
                      <div class="quantity-select">
                        <div
                          @click="reduceNumber(item.bookId)"
                          class="entry value-minus"
                        >
                          &nbsp;
                        </div>
                        <div class="entry value">
                          <span>{{ item.number }}</span>
                        </div>
                        <div
                          @click="addNumber(item.bookId)"
                          class="entry value-plus active"
                        >
                          &nbsp;
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="invert">{{ item.bookShowname }}</td>
                  <td class="invert">{{ item.bookPrice }}</td>
                  <td class="invert">
                    <div style="margin-left: 50px;" class="rem">
                      <div
                        @click="delShopping(item.bookId)"
                        class="close1"
                      ></div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <el-row>
              <el-col :span="5">
                <el-pagination
                  @size-change="pageSizeChange"
                  @current-change="pageNumChange"
                  :current-page="page.current"
                  :page-sizes="[1, 5, 10]"
                  :page-size="page.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </div>
          <div class="checkout-left">
            <div class="col-md-4 checkout-left-basket">
              <h4>统 计 面 板</h4>
              <ul>
                <li v-for="(item, i) in totalList" :key="i">
                  <div style="float:left">{{ item.bookShowname }}</div>
                  <i>-</i>
                  <span>{{ item.money }}元</span>
                </li>
                <li>
                  <div style="float:left;font-weight: bold;color: black;">
                    总计
                  </div>
                  <i>-</i>
                  <span style="font-weight: bold;color: black;"
                    >{{ totalMoney }}元</span
                  >
                </li>
              </ul>
            </div>
            <div class="col-md-8 address_form" style="text-align: left;">
              <h4>开始下单</h4>
              <form
                onsubmit="return false"
                class="creditly-card-form shopf-sear-headinfo_form"
              >
                <div class="creditly-wrapper wrapper">
                  <div class="information-wrapper">
                    <!-- <div class="first-row form-group">
                      <div class="controls">
                        <label class="control-label">真实姓名: </label>
                        <input
                          class="billing-address-name form-control"
                          type="text"
                          name="name"
                          placeholder="真实姓名"
                        />
                      </div>
                      <div class="card_number_grids">
                        <div class="card_number_grid_left">
                          <div class="controls">
                            <label class="control-label">联系方式:</label>
                            <input
                              class="form-control"
                              type="text"
                              placeholder="联系方式"
                            />
                          </div>
                        </div>
                        <div class="clear"></div>
                      </div>
                      <div class="controls">
                        <label class="control-label">详细地址: </label>
                        <input
                          class="form-control"
                          type="text"
                          placeholder="详细地址"
                        />
                      </div>
                    </div> -->
                    <el-form
                      onsubmit="return false"
                      :model="defaultAddress"
                      :rules="rules"
                      ref="defaultAddress"
                      class="demo-ruleForm"
                    >
                      <el-form-item
                        v-if="!showAddAddress"
                        style="font-weight: bold;"
                        prop="addressId"
                      >
                        <span slot="label">
                          <span style="font-size: 20px;line-height: 50px;">选择地址</span>
                        </span>
                        <el-select
                          style="width: 300px;"
                          v-model="defaultAddress.addressId"
                          @change="changeAddress($event)"
                        >
                          <el-option
                            v-for="item in addresses"
                            :key="item.addressId"
                            :label="item.addressInfo"
                            :value="item.addressId"
                          >
                          </el-option>
                        </el-select>
                        <el-button type="primary" @click="showUserAddress" round size="mini"
                          >编辑地址</el-button
                        >
                      </el-form-item>

                      <el-form-item
                        v-if="showAddAddress"
                        style="font-weight: bold;"
                      >
                        <el-button type="primary" @click="showUserAddress" round size="mini"
                          >新增地址</el-button
                        >
                      </el-form-item>
                      
                      <el-form-item label="真实姓名" prop="receiverName">
                        <el-input
                          disabled
                          placeholder="真实姓名"
                          v-model="defaultAddress.receiverName"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="联系方式" prop="receiverPhone">
                        <el-input
                          disabled
                          placeholder="联系方式"
                          v-model="defaultAddress.receiverPhone"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="详细地址" prop="addressInfo">
                        <el-input
                          disabled
                          placeholder="详细地址"
                          v-model="defaultAddress.addressInfo"
                        ></el-input>
                      </el-form-item>
                      <button
                        class="submit check_out"
                        @click="submitForm('defaultAddress')"
                      >
                        快速下单
                      </button>
                    </el-form>
                  </div>
                </div>
              </form>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ShowUserAddress from './ShowUserAddress.vue';

export default {
  data() {
    return {
      page: {},
      totalList: [],
      totalMoney: "***",
      orderForm: {
        bookIdList: [],
        receiverName: "",
        receiverPhone: "",
        addressInfo: ""
      },
      rules: {
        receiverName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ],
        receiverPhone: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur"
          }
        ],
        addressInfo: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur"
          }
        ]
      },
      defaultAddress: {
        receiverName: "",
        receiverPhone: "",
        addressInfo: ""
      },
      showAddAddress: false,
      addresses: []
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listShoppingBooks() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/userInfo/user/selectShoppingCar", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
        .then(resp => {
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    addNumber(bookId) {
      this.$http
        .get("/userInfo/user/addNumber", {
          params: {
            bookId: bookId,
            number: 1
          }
        })
        .then(resp => {
          this.listShoppingBooks();
          this.getTotalMoney();
        });
    },
    reduceNumber(bookId) {
      this.$http
        .get("/userInfo/user/reduceNumber", {
          params: {
            bookId: bookId,
            number: 1
          }
        })
        .then(resp => {
          if (resp.data.code != 200) {
            alert(resp.data.message);
          }
          this.listShoppingBooks();
          this.getTotalMoney();
        });
    },
    changeSelAllBtn(e) {
      this.$http
        .get("/userInfo/user/changeChecked", {
          params: {
            bookId: e.target.value,
            checked: e.target.checked
          }
        })
        .then(resp => {
          this.listShoppingBooks();
          this.getTotalMoney();
        });
    },
    getTotalMoney() {
      this.$http.get("/userInfo/user/getTotalMoney").then(resp => {
        this.totalList = resp.data.data.shoppingMoneyDTOS;
        this.totalMoney = resp.data.data.totalMoney;
      });
    },
    onFormSubmit(form) {
      return;
    },
    delShopping(bookId) {
      this.$http
        .get("/userInfo/user/delShopping?bookId=" + bookId)
        .then(resp => {
          alert(resp.data.message);
          this.listShoppingBooks();
          this.getTotalMoney();
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    submitForm(defaultAddress) {
      this.$refs[defaultAddress].validate(valid => {
        if (valid) {
          if (this.orderForm.bookIdList.length == 0) {
            alert("请选择要购买的商品");
            return;
          }
          this.orderForm.addressInfo = this.defaultAddress.addressInfo;
          this.orderForm.receiverName = this.defaultAddress.receiverName;
          this.orderForm.receiverPhone = this.defaultAddress.receiverPhone;
          //下单操作
          this.$http
            .post("/orderInfo/user/order", this.orderForm)
            .then(resp => {
              alert(resp.data.message);
              this.listShoppingBooks();
              this.getTotalMoney();
              sessionStorage.setItem(
                "singleOrder",
                JSON.stringify(resp.data.data)
              );
              sessionStorage.setItem("singleOrderId",resp.data.data.orderNum);
              this.$router.push("/showSingleOrder");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(orderForm) {
      this.$refs[orderForm].resetFields();
    },
    bookIdListInit() {
      this.orderForm.bookIdList = [];
      let table = document.getElementById("table"); // 获取table元素
      let selBtns = table.getElementsByClassName("selBtn"); // 获取class为selBtn的元素集合
      let selBtnsArray = Array.from(selBtns); // 将HTMLCollection转换为数组
      let num = 0;
      for (var i = 0; i < selBtnsArray.length; i++) {
        if (selBtnsArray[i].checked) {
          this.orderForm.bookIdList[num] = selBtnsArray[i].value;
          num++;
        }
      }
    },
    findDefaultAddress() {
      this.$http.get("/userAddress/user/findDefaultAddress").then(resp => {
        if (resp.data.data != null) {
          this.defaultAddress = resp.data.data;
          this.showAddAddress = false;
        } else {
          this.showAddAddress = true;
        }
      });
    },
    changeAddress(addressId) {
      this.$http
        .get("/userAddress/user/findAddress?addressId=" + addressId)
        .then(resp => {
          alert(resp.data.message);
          this.defaultAddress = resp.data.data;
        });
    },
    listAllAddress() {
      this.$http.get("/userAddress/user/selectAddress").then(resp => {
        if (resp.data.data != null) {
          this.addresses = resp.data.data;
        }
      });
    },
    showUserAddress(){
      this.$router.push("/showUserAddress");
    }
  },
  created() {
    this.listShoppingBooks();
    this.getTotalMoney();
    this.findDefaultAddress();
    this.listAllAddress();
  },
  updated() {
    this.bookIdListInit();
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/bootstrap.css";
@import "../../../assets/login/css/shop.css";
@import "../../../assets/login/css/checkout.css";
@import "../../../assets/login/css/style.css";
@import "../../../assets/login/css/font-awesome.css";
#selectForm >>> .el-form-item__label {
  font-size: 20px;
}
</style>
